<template>
	<div id="app-container">
		<!-- <div class="home-page page">这是首页</div> -->
		<SecondPage class="page"/>
        <div class="home-page page">这是2页</div>
		<div class="home-page page">这是3页</div>
		<div class="home-page page">这是4页</div>
	</div>
</template>

<script>
import SecondPage from '@/components/SecondPage.vue';

export default {
    components: {
        SecondPage
    },
	data() {
		return {
			pageIndex: 0, // 页面索引
			pageHeight: window.innerHeight, // 页面高度
			throttle: false // 节流器
		};
	},
	created() {
		// 监听页面变化
		window.addEventListener('resize', () => {
			this.pageHeight = window.innerHeight; // 获取页面高度
		});

		// 监听鼠标滚轮事件
		document.addEventListener('wheel', this.handleWheel);
		window.onmousewheel = document.onmousewheel = this.handleWheel;
	},
	methods: {
		handleWheel(event) {
			// 节流
			if (this.throttle) return;
			this.throttle = true;
			setTimeout(() => {
				this.throttle = false;
			}, 500);

			// 滚动事件
			if (event.wheelDelta > 0) {
				// 向上滚动
				this.pageIndex--;
			} else {
				// 向下滚动
				this.pageIndex++;
			}
			// 判断页面索引是否超出范围
			if (this.pageIndex < 0) {
				this.pageIndex = 0;
			} else if (this.pageIndex > 3) {
				this.pageIndex = 3;
			}
			console.log(this.pageIndex);

			this.handleSetContent();
		},
		handleSetContent() {
			// 设置内容
			let app = document.getElementById('app-container');
			app.style.transform = `translateY(-${(this.pageIndex) * this.pageHeight}px)`;
			app.style.transition = 'all 700ms ease 0s';
			app.style.height = '100%';
			app.style.position = 'relative';
			app.style.touchAction = 'none';
		}
	}
};
</script>

<style lang="scss">
.app-container {
	overflow: hidden;
}
.page {
	width: 100vw;
	height: 100vh;

	&:nth-child(1) {
		background-color: #fad7a0;
	}
	&:nth-child(2) {
		background-color: #9acddb;
	}
	&:nth-child(3) {
		background-color: #edd5c0;
	}
	&:nth-child(4) {
		background-color: #b5ead7;
	}
}
</style>
